<template>
  <div class="order">
    <van-nav-bar title="填写订单" @click-left="back" left-arrow />
    <van-pull-refresh v-model="isLoading" @refresh="onRefresh">

    <van-notice-bar
      style="margin-top:2px;background-color:#fff7d2"
      text="订单中含不支持七天无理由退货商品,请确认后提交"
      left-icon="volume-o"/>
    <van-row class="row" @click="addressas()" v-show="ss">
      <van-col span="2">
        <van-icon style="float:right;margin-top:14px" name="add-o" color="#fa1e78" size="22" />
      </van-col>
      <van-col span="1"></van-col>
      <van-col span="9">请先填写收货地址</van-col>
      <van-col span="10"></van-col>
      <van-col span="2">
        <van-icon style="margin-top:12px" name="arrow" size="22" />
      </van-col>
    </van-row>
    <van-row
      @click="addressa(siteList[0].id)"
      v-show="!ss"
      v-for="item in siteList"
      :key="item.id"
      style="background-color:white;padding-bottom:20px">
      <van-col span="24">
        <van-row style="margin-top:10px">
          <van-col span="1"></van-col>
          <van-col span="4">
            <span>{{item.name}}</span>
          </van-col>
          <van-col span="1"></van-col>
          <van-col span="6">
            <span>{{item.tel.substring(0,3)+'****'+item.tel.substring(11,7)}}</span>
          </van-col>
        </van-row>
        <van-row style="font-size:14px;margin-top:10px">
          <van-col span="22">
            <span class="span">默认</span>
            {{item.address}}
          </van-col>
          <van-col span="2">
            <van-icon name="arrow" size="18" />
          </van-col>
        </van-row>
      </van-col>
    </van-row>
    <van-row class="odr">
      <van-col span="4">配送</van-col>
      <van-col span="18" style="overflow:hidden">
        <van-row style="float:right;font-size:16px">普通快递</van-row>
        <br />
        <van-row style="float:right;font-size:16px">送货:工作日、双休日与假日送</van-row>
      </van-col>
      <van-col span="1">
        <van-icon name="arrow" size="22" color="#bcb8b7" style="line-height:44px" />
      </van-col>
    </van-row>
    <van-row style="background-color:#ffffff">
      <van-col span="2">
        <van-image src="//gfs11.gomein.net.cn/T18GDvB_hg1RCvBVdK.png" />
      </van-col>
      <van-col span="20" style="font-size:15px;font-weight:800">国美自营</van-col>
    </van-row>
    <van-card
      style="background-color:#ffffff;margin-top:-1px"
      v-for="(item,index) in goodsList"
      :key="index"
      :num="gwList[index].num ? gwList[index].num:0"
      :price="item.price"
      :title="item.goods_name"
      :thumb="item.image"/>
    <van-row style="padding:10px;background-color:#ffffff;margin-top:10px">
      <van-col span="2">支付</van-col>
      <van-col span="17"></van-col>
      <van-col span="4" style="font-weight:700">在线支付</van-col>
      <van-col span="1">
        <van-icon name="arrow" style="margin-top:2px" />
      </van-col>
    </van-row>
    <van-row style="padding:10px;background-color:#ffffff;margin-top:1px">
      <van-col span="2">发票</van-col>
      <van-col span="8"></van-col>
      <van-col span="6" style="font-weight:700;color:#f20d59">
        <div style="float:right">电子普通发票</div>
      </van-col>
      <van-col span="7" style="font-weight:700">
        <div style="float:right">(明细-{{name}})</div>
      </van-col>
      <van-col span="1">
        <van-icon name="arrow" style="margin-top:3px" />
      </van-col>
    </van-row>
    <van-row style="padding:10px;background-color:#ffffff;margin-top:10px">
      <van-col span="3">优惠劵</van-col>
      <van-col span="14"></van-col>
      <van-col span="6" style="font-weight:700">无可用优惠卷</van-col>
      <van-col span="1">
        <van-icon name="arrow" style="margin-top:3px" />
      </van-col>
    </van-row>
    <van-row style="padding:10px;background-color:#ffffff;margin-top:1px">
      <van-col span="3">美通卡</van-col>
      <van-col span="17"></van-col>
      <van-col span="3" style="font-weight:700">无可用</van-col>
      <van-col span="1">
        <van-icon name="arrow" style="margin-top:3px" />
      </van-col>
    </van-row>
    <van-row style="padding:10px;background-color:#ffffff;margin-top:1px">
      <van-col span="2">美豆</van-col>
      <van-col span="1"></van-col>
      <van-col span="12">
        <div style="float:right">共0美豆,满100美豆可使用</div>
      </van-col>
      <van-col span="5">
        <van-icon name="info-o" style="margin-top:3px" />
      </van-col>
      <van-col span="3"></van-col>
      <van-col span="1">
        <van-icon name="warning-o" size="17" />
      </van-col>
    </van-row>
    <van-row style="padding:10px;background-color:#ffffff;margin-top:10px">
      <van-col span="4">商品总计</van-col>
      <van-col span="14"></van-col>
      <van-col span="6" style="font-weight:700">
        <div style="float:right;color:#f20d59">￥{{sum}}.00</div>
      </van-col>
    </van-row>
    <van-row style="padding:10px;background-color:#ffffff;">
      <van-col span="2">运费</van-col>
      <van-col span="17"></van-col>
      <van-col span="5" style="font-weight:700">
        <div style="float:right;color:#f20d59">+￥0.00</div>
      </van-col>
    </van-row>
    <van-notice-bar style="margin:40px 0 40px 0;background-color:#fff7d2" :scrollable="false">送至:{{gpr}}</van-notice-bar>
    <div class="bottmo">
       <div class="left"> <div style="float:left;margin:5px 10px 0 10px;">应付金额:</div><div style="float:left;font-weight:700;font-size:22px;color:#f20c59">￥{{sum}}.00</div></div>
       <van-button class="right" @click="submit">提交订单</van-button>
    </div>
    </van-pull-refresh>
  </div>
</template>

<script>
export default {
  data () {
    return {
      isLoading: false,
      goods_ids: [],
      radio: '',
      ss: true,
      siteList: [],
      chosenAddressId: 0,
      goodsList: [],
      gwList: [],
      name: '',
      sum: 0,
      gpr: ''
    }
  },
  methods: {
    onRefresh () {
      setTimeout(() => {
        this.$toast('刷新成功')
        // console.log(111)
        this.isLoading = false
      }, 500)
    },
    //   返回上一级
    back () {
      this.$router.go(-1) // 返回上一层
    },
    // 获取地址
    getsity () {
      const a = localStorage.getItem('address_id')
      if (a) {
        this.radio = Number(a)
      }
      this.$http.get('/site', { params: { id: this.radio } }).then(res => {
        this.siteList = res.data.data
        this.name = this.siteList[0].name
        this.gpr = this.siteList[0].gpr
        if (this.siteList.length !== 0) {
          this.ss = false
        }
      })
    },
    onAdd () {},
    onSubmit () {},
    // 地址操作
    addressa (id) {
      localStorage.setItem('address_id', id)
      this.$router.push('/address')
    },
    addressas () {
      // localStorage.setItem('address_id', id)
      this.$router.push('/address')
    },
    // 获取商品
    getgoods () {
      this.$http
        .get('/ordergw', { params: { ids: this.goods_ids } })
        .then(res => {
          // console.log(res)
          this.gwList = res.data.data
          this.$http
            .get('/order_goods', { params: { ids: this.goods_ids } })
            .then(res => {
              this.goodsList = res.data.data
              // console.log(this.goodsList)
              // console.log(this.gwList)

              this.goodsList.forEach((element, index) => {
                this.sum += element.price * this.gwList[index].num
              })
            })
        })
    },
    // 订单提交
    submit () {
      this.$http.post('/porder', {
        goods_id: this.goods_ids,
        user_id: sessionStorage.getItem('userid'),
        order_num: '31232313' + new Date().getTime() + sessionStorage.getItem('userid') + '224',
        address_id: this.siteList[0].id,
        status: 0,
        addtime: new Date().getTime(),
        sumprice: this.sum
      })
      this.$router.push('/pay')
    }
  },
  created () {
    this.getsity()
    let c = localStorage.getItem('goods_id').split(',')
    if (c) {
      this.goods_ids = c
    }
    this.getgoods()
  }
}
</script>

<style scoped>
.van-nav-bar .van-icon {
  color: #333;
  font-size: 25px;
}
.row {
  line-height: 50px;
  background-color: white;
  margin-bottom: 10px;
}
.order {
  background-color: #f3f5f6;
}
.span {
  margin-left: 20px;
  color: #fa1e7b;
  border: 1px solid #fa1e7b;
  font-size: 12px;
  padding: 0px 5px;
  border-radius: 10%;
}
body {
  background-color: #f3f5f6;
}
.odr {
  margin-top: 10px;
  background-color: white;
  padding: 20px 10px;
  font-weight: 700;
  color: black;
}
.bottmo{
  width:100%;
  height: 43px;
  position: fixed;
  bottom: 0;
  background-color: #fff;
  z-index: 9999;
}
.right{
  float:right;
  color: #fff;
      background: linear-gradient(90deg,#fa1e8c,#fc1e56);
}
.left{
  float: left;
  padding-top: 10px
}
</style>
